<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
</head>
<body>
<div class="ui container">
    <div class="ui top aligned teal segment">
        <p class="ui middle aligned attached">CRUD-INPUT</p>
    </div>
    <form class="ui form" action="#" th:object="${user}" th:action="${user.username}==null ?  @{/insertUser} : @{/update/{id}(id=${user.id})}"  method="post">
        <div class="field">
            <label>UserName</label>
            <input type="text" name="username" th:value="${user.username}"  placeholder="username">
            <!--            <input id="username" name="username" th:field="*{username}"  type="text">-->
        </div>
        <div class="field">
            <label>PhoneNumber</label>
            <input type="text" name="phoneNumber" th:value="${user.phoneNumber}" placeholder="phoneNumber">
        </div>
<!--        <div class="ui negative message" th:if="${#fields.hasErrors('name')}"  >  //检测属性是否为空，空的话返回备注name的错误信息，前端利用下方的script返回原定的错误信息，后端返回实体类上标注的错误信息-->
<!--            <i class="close icon"></i>-->
<!--            <div class="header">验证失败</div>-->
<!--            <p th:errors="*{name}">提交信息不符合规则</p>-->
<!--        </div>-->
        <button class="ui teal button" type="submit">完成</button>
        <div class="ui error message"></div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    $('.ui.form').form({
        fields : {
            username : {
                identifier: 'username',
                rules: [{
                    type : 'empty',
                    prompt: '请输入用户名'
                }]
            },
            phoneNumber : {
                identifier: 'phoneNumber',
                rules: [{
                    type : 'empty',
                    prompt: '请输入电话'
                }]
            }
        }
    });
</script>
</body>
</html>